<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  用户名：<input type="text" class="username"><span></span><br>
  密码：<input type="text" class="password"><span></span><br>
  手机号：<input type="text" class="tel"><span></span><br>
  邮箱：<input type="text" class="email"><span></span><br>
  qq号：<input type="text" class="qq"><span></span><br>
  固话：<input type="text" class="phone"><span></span><br>
  网址：<input type="text" class="url"><span></span><br>
</body>
<script>

  const un = document.querySelector(".username");
  const pw = document.querySelector(".password");
  const tel = document.querySelector(".tel");
  const email = document.querySelector(".email");
  const qq = document.querySelector(".qq");
  const phone = document.querySelector(".phone");
  const url = document.querySelector(".url");


  // 中文：[\u2E80-\u9FFF]

  // test默认只验证字符串的局部（只要这个字符串中的某个部分符合正则要求，即为true）

  un.oninput = function(){
    const str = this.value;

    // 自定义的用户名的规则：字母，中文，长度：3~10
    const reg = /^[a-z\u2E80-\u9FFF]{3,10}$/i;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }

  pw.oninput = function(){
    const str = this.value;

    // 自定义的密码的规则：数字，字母，特殊字符，6到10位
    const reg = /^[^\u2E80-\u9FFF]{6,10}$/i;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }
  
  tel.oninput = function(){
    const str = this.value;

    // 手机号的规则：11位数字，必须为1开头，第二位不能012，其他任意
    const reg = /^1[3-9]\d{9}$/i;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }
  
  email.oninput = function(){
    const str = this.value;

    // 邮箱的规则：
    // 数字字母下划线中划线1到10 @ 数字字母下划线1到10 (. 字母2到6)1到2
    const reg = /^[\w\-]{1,10}@\w{1,10}(\.[a-z]{2,6}){1,2}$/;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }
  
  qq.oninput = function(){
    const str = this.value;

    // qq号的规则：纯数字，非0开头，纯数字，6~11
    const reg = /^[1-9]\d{5,10}$/;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }

  phone.oninput = function(){
    const str = this.value;

    // 固话的规则：
      // 0511-1234567-1234
      // 0511-1234567
      // 1234567-1234
      // 1234567
    const reg = /^(0\d{2,3}-)?\d{7}(-\d{1,4})?$/;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }

  url.oninput = function(){
    const str = this.value;

    // url的规则：
      // https://www.baidu.com
      // http://www.baidu.com
      // www.baidu.com
      // mp3.baidu.com
      // baidu.com

    const reg = /^(https?:\/\/)?([a-z0-9]{1,10}\.)?\w{1,10}(\.[a-z]{2,6}){1,2}$/;

    if( reg.test( str ) ){
      this.nextElementSibling.innerText = "通过"
    }else{
      this.nextElementSibling.innerText = "不通过"
    }
  }




  
</script>
</html>